<style scoped>
.icon-coll {
  font-size: 28px;
  color: #ffffff;
  position: absolute;
  top: 30px;
  left: 10px;
}
.span-datav {
  font-size: 16px;
  font-weight: bold;
}
.icon-report {
  cursor: pointer;
  margin-top: 36px;
  font-size: 24px;
  margin-right: 10px;
}
.div-badge {
  font-size: 24px;
  padding: 10px;
  margin: 22px 20px 0px 0px;
  line-height: 30px;
  height: 40px;
  cursor: pointer;
}

.img-head {
  width: 120px;
  border-radius: 5px;
  cursor: pointer;
}
</style>
<template>
  <Layout style="height: 100%" class="main">
    <Header class="header-title">
      <div class="custom-content-con">
        <user :user-avator="userAvator" />

        <language
          v-if="$config.useI18n"
          @on-lang-change="setLocal"
          style="margin-right: 10px;"
          :lang="local"
        />

        <fullscreen v-model="isFullscreen" style="margin-right: 10px;" />
      </div>
      <div class="custom-header">
        <img :src="minLogo" class="img-logo" />
       临沂市基本养老服务综合平台-养老评估系统
      </div>
    </Header>
   <Layout style="height: 80%" >
      <Sider
        hide-trigger
        collapsible
        :width="256"
        :collapsed-width="64"
        v-model="collapsed"
        class="left-sider"
        style="overflow: hidden;border-right:1px solid #d7dde4"
      >
        <side-menu
          accordion
          ref="sideMenu"
          :active-name="$route.name"
          :collapsed="collapsed"
          @on-select="turnToPage"
          :menu-list="menuList"
        ></side-menu>
      </Sider>
      <Layout>
        <Content class="main-content-con">
          <Layout class="main-layout-con">
            <div class="tag-nav-wrapper">
              <Icon
                class="icon-coll"
                :type="collapsed? 'ios-pause':'md-menu'"
                @click="CollapsedChange"
              />

              <tags-nav
                :value="$route"
                @input="handleClick"
                :list="tagNavList"
                @on-close="handleCloseTag"
              />
            </div>
            <Content class="content-wrapper">
              <keep-alive :include="cacheList">
                <router-view :key="$route.path" />
              </keep-alive>
              <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
            </Content>
          </Layout>
        </Content>
      </Layout>
    </Layout>
  </Layout>
</template>
<script>
import SideMenu from "./components/side-menu";
import HeaderBar from "./components/header-bar";
import TagsNav from "./components/tags-nav";
import User from "./components/user";
import ABackTop from "./components/a-back-top";
import Fullscreen from "./components/fullscreen";
import Language from "./components/language";
import ErrorStore from "./components/error-store";
import { mapMutations, mapActions, mapGetters } from "vuex";
import {
  getNewTagList,
  getNextRoute,
  routeEqual,
  getUserInfo,
  getMenuByRouter
} from "@/libs/util";
import routers from "@/router/routers";
import minLogo from "@/assets/images/logo_cir_100.png";
import maxLogo from "@/assets/images/logo.png";
import "./main.less";
export default {
  name: "Main",
  components: {
    SideMenu,
    HeaderBar,
    Language,
    TagsNav,
    Fullscreen,
    ErrorStore,
    User,
    ABackTop
  },
  data() {
    return {
      collapsed: false,
      minLogo,
      maxLogo,
      isFullscreen: false
    };
  },
  computed: {
    ...mapGetters(["errorCount"]),
    tagNavList() {
      return this.$store.state.app.tagNavList;
    },
    tagRouter() {
      return this.$store.state.app.tagRouter;
    },
    userAvator() {
      return getUserInfo().EmployeeAvator;
    },
    cacheList() {
      return [
        "ParentView",
        ...(this.tagNavList.length
          ? this.tagNavList
              .filter(item => !(item.meta && item.meta.notCache))
              .map(item => item.name)
          : [])
      ];
    },
    menuList() {
      return this.$store.getters.menuList;
    },
    local() {
      return this.$store.state.app.local;
    },
    hasReadErrorPage() {
      return this.$store.state.app.hasReadErrorPage;
    }
  },
  methods: {
    ...mapMutations([
      "setBreadCrumb",
      "setTagNavList",
      "addTag",
      "setLocal",
      "setHomeRoute"
    ]),
    ...mapActions(["handleLogin"]),
    turnToPage(route) {
      let { name, params, query } = {};
      if (typeof route === "string") name = route;
      else {
        name = route.name;
        params = route.params;
        query = route.query;
      }
      if (name.indexOf("isTurnByHref_") > -1) {
        window.open(name.split("_")[1]);
        return;
      }
      this.$router.push({
        name,
        params,
        query
      });
    },
    handleCollapsedChange(state) {
      this.collapsed = state;
    },
    CollapsedChange() {
      this.collapsed = !this.collapsed;
      const ev = new Event("resize", { bubbles: true, cancelable: false });
      window.dispatchEvent(ev);
    },
    handleCloseTag(res, type, route) {
      if (type === "all") {
        this.turnToPage(this.$config.homeName);
      } else if (routeEqual(this.$route, route)) {
        if (type !== "others") {
          const nextRoute = getNextRoute(this.tagNavList, route);
          this.$router.push(nextRoute);
        }
      }
      this.setTagNavList(res);
    },
    handleClick(item) {
      this.turnToPage(item);
    }
  },
  watch: {
    $route(newRoute) {
      const { name, query, params, meta } = newRoute;
      this.addTag({
        route: { name, query, params, meta },
        type: "push"
      });
      this.setBreadCrumb(newRoute);
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute));
      this.$refs.sideMenu.updateOpenName(newRoute.name);
    }
  },
  mounted() {
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    this.setTagNavList();
    this.setHomeRoute(routers);
    this.addTag({
      route: this.$store.state.app.homeRoute
    });
    this.setBreadCrumb(this.$route);
    // 设置初始语言
    this.setLocal(this.$i18n.locale);
    // 如果当前打开页面不在标签栏中，跳到homeName页
    if (!this.tagNavList.find(item => item.name === this.$route.name)) {
      this.$router.push({
        name: this.$config.homeName
      });
    }
  }
};
</script>
